<template>
	<div class="user">
		<div class="userTop">
			<div class="userIocn"><i class="iconfont icon-user"></i>账户</div>
			<div class="userName">这里是账号名称</div>
			<div class="userType">
				<span class="userTypeGr">个人永华</span>
				<div class="userTypeQy">
					<span>企业用户<i class="iconfont icon-close"></i></span>
				</div>
			</div>
		</div>
		<div class="userData bgcorfff">
			<div class="userImg">
				<img src="https://www.qpmall.com:10000/M00/27/EE/ZcjD5VlDPESASQwSAAtI5fApzQk773.jpg" />
			</div>
			<div class="collectPro">
				<font class="count">0</font>
				<div class="text">我的收藏</div>
			</div>
			<div class="browsePro">
				<font class="count">0</font>
				<div class="text">浏览记录</div>
			</div>
		</div>
		<div class="userOrder">
			<div class="title">
				<div class="titleH1">
					<i class="iconfont icon-xunjia"></i>
					<font class="titleText">我的询价单</font>
				</div>
				<div class="select">
					<font class="alltext">全部询价</font>
					<i class="iconfont icon-keyboard_arrow_right"></i>
				</div>
			</div>
			<div class="inner">
				<ul class="innerBar">
					<li>
						<i class="iconfont icon-baojiazhong">
							<em>2</em>
						</i>
						<div>报价中</div>
					</li>
					<li>
						<i class="iconfont icon-wancheng">
							<em>3</em>
						</i>
						<div>报价完成</div>
					</li>
					<li>
						<i class="iconfont icon-toubaoshixiaoda"></i>
						<div>已失效</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="userOrder">
			<div class="title">
				<div class="titleH1">
					<i class="iconfont icon-icon" style="background:#FFB400;"></i>
					<font class="titleText">我的订单</font>
				</div>
				<div class="select">
					<font class="alltext">全部订单</font>
					<i class="iconfont icon-keyboard_arrow_right"></i>
				</div>
			</div>
			<div class="inner">
				<ul class="innerBar">
					<li>
						<i class="iconfont icon-daifukuan">
							<em>2</em>
						</i>
						<div>代付款</div>
					</li>
					<li>
						<i class="iconfont icon-daishouhuo">
							<em>3</em>
						</i>
						<div>待收货</div>
					</li>
					<li>
						<i class="iconfont icon-daipingjia"></i>
						<div>待评价</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="userOrder">
			<div class="title">
				<div class="titleH1">
					<i class="iconfont icon-kefu" style="background:#6ED3CD;"></i>
					<font class="titleText">联系客服</font>
				</div>
				<div class="select" style="flex: 0 0 130px;">
					<font class="alltext">010-61640602</font>
					<i class="iconfont icon-keyboard_arrow_right"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{ };
</script>

<style>
	.user{
		background: #EFEFEF;
		position:absolute;
		width: 100%;
		height: 100%;
		padding-bottom: 70px;
	}
	.bgcorfff{
		background: #fff;
	}
	.userTop{
		height: 150px;
		width: 100%;
		background: url(../../assets/bg.jpg);
		position: relative;
		    background-size: 100% 150px;
	}
	.userTop .userIocn{
		position: absolute;
		top: 10px;
		right: 20px;
		background: rgba(0,0,0,.3);
		padding: 8px 15px;
		color: #fff;
		display: inline-block;
		border-radius:18px;
	}
	.userTop .userIocn .icon-user{
		color: #fff;
		margin-right: 5px;
	}
	.userTop .userName{
		line-height: 150px;
		color: #fff;
		margin-left: 2rem;
	}
	.userTop .userTypeQy,.userTop .userTypeGr{
		position: absolute;
		left: 130px;
		bottom: 10px;
		line-height: 1.5rem;
		font-size: .8rem;
		background-color: #2d89f0;
		color: #fff;
		padding: 0 5px;
	}
	.userTop .userTypeQy{
		left: 200px;
		background-color: #FF0000;
	}
	.userTypeQy span{
		color: #fff;
		position: relative;
	}
	.userTypeQy .icon-close{
		position: absolute;
		top: -10px;
		right: -15px;
		background: #f00;
		line-height: 1.2rem;
		width: 1.2rem;
		text-align: center;
		border-radius: 50%;
		font-size: .9rem;
		color: #fff;
	}
	.userData{
		display: flex;
	}
	.user .userImg{
		position: relative;
		z-index: 1;
		flex: 0 0 90px;
		width: 90px;
		height: 90px;
		border: solid 1px #fde4a4;
		border-radius:50%;
		background: #f00;
		overflow: hidden;
		margin-left: 15px;
		margin-top: -45px;
	}
	.user .userImg img{
		width: 100%;
		height: 100%;
	}
	.user .collectPro,.user .browsePro{
		flex: 1;
		display: inline-block;
		text-align: center;
		padding: 20px 0;
	}
	.user .collectPro .count,.user .browsePro .count{
		color: #FFB400;
	}
	.user .collectPro .text,.user .browsePro .text{
		margin-top: 10px;
	}
	.userOrder{
		background-color: #fff;
	}
	.user .title{
		display: flex;
		font-size: 0em;
		line-height: 40px;
		padding: 0 15px;
		margin-top: 10px;
		border-bottom:solid 1px #efefef ;
		background: #fff;
	}
	.user .select{
		flex: 0 0 90px;
	}
	.user .titleH1{
		display: inline-block;
	    font-size: 1rem;
	    -webkit-box-flex: 1;
	    -ms-flex: 1;
	    flex: 1;
		font-weight: 300;
	}
	.user .titleH1 .iconfont{
		display:inline-block;
		background: #57B2FF;	
		color: #fff;
		font-size: .9rem;
		line-height: 1.6rem;
		width: 1.6rem;
		height: 1.6rem;
		text-align: center;
		vertical-align:middle;
	}
	.user .innerBar{
		display: flex;
		padding: 30px 0;
	}
	.user .innerBar li{
		flex: 1;
		text-align: center;
	}
	.user .innerBar li .iconfont{
		position: relative;
		font-size: 1.8rem;
		display: block;
		margin-bottom: .5rem;
	}
	.user .innerBar li .iconfont em{
		position: absolute;
		display: block;
		top: -10px;
		right: 30%;
		background: #F00;
		color: #fff;
		width: 1rem;
		height: 1rem;
		font-size: .8rem;
		line-height: 1rem;
		border-radius: 50%;
	}
</style>